<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在nvue上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" class="paging" v-model="infoList" @query="queryList" :fixed="false" :auto="false">
			<!-- 在nvue中，z-paging中插入的列表item必须是cell，必须使用cell包住，因为在nvue中，z-paging使用的是nvue的list组件。 -->
			<!-- 不能使用index作为key的唯一标识，:key必须添加并且必须是唯一的 -->
			<!-- 如果希望在vue中渲染view，nvue中渲染cell，可使用z-paging-cell代替cell -->

			<view class="viewBox">
				<uni-swiper-dot v-if="currentIndex == 0 && searchParam == ''" @clickItem=clickItem :info="infoBanner"
					:current="current" :mode="mode" :dotsStyles="dotsStyles">
					<swiper style="height: 380rpx;margin-top: 25rpx;" @change="change" :current="swiperDotIndex"
						:autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in infoBanner" :key="index">
							<view>
								<image v-if="item != null" :src="item.replace(/\\/g,'/')" mode="scaleToFill"
									style="width: 100%;height: 380rpx;" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

				<view v-for="item in infoList" class="itemView" @click="clickItem(item)">
					<text class="itemTitle">{{item.Title}}</text>

					<scroll-view :scroll-x="true">
						<view class="viewImg">
							<image v-for="img in item.ContentImg" :src="baseUrl +img.path" class="itemImg">
							</image>
						</view>
					</scroll-view>

					<view class="itemText">
						{{item.CreateTime}}
						<view style="flex: 1;"></view>
						<image src="../../static/eye.png" style="width: 30rpx;height: 21rpx;margin-right: 6rpx;">
						</image>
						{{item.ViewCount}}
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		GetListBannerImg,
		GetListNews
	} from "../../common/api.js"
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				infoBanner: [],
				current: 0,
				mode: 'dot', //default 、round 、 indexes、nav
				swiperDotIndex: 0,
				dotsStyles: {
					backgroundColor: '#fff',
					border: '2.5px #fff solid',
					color: '#fff',
					selectedBackgroundColor: '#00BFD0',
					selectedBorder: '2.5px #00BFD0 solid',
					bottom: 70
				},
				autoplay: true,
				interval: 2000,
				duration: 500,

				infoList: [],
				firstLoaded: false,
				baseUrl: getApp().globalData.requesturl,

			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},

			searchParam: {
				type: String,
				default: function() {
					return ''
				}
			},

			status: {
				type: Number,
				default: function() {
					return 888
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								this.$refs.paging.reload();
							})
						}
					}
				},
				immediate: true
			},

			searchParam: {
				handler(newVal) {
					this.$nextTick(() => {
						this.$refs.paging.reload();
					})
				},
				immediate: true
			},

			status: {
				handler(newVal) {
					this.$nextTick(() => {
						this.getBanner()
						this.$refs.paging.reload();
					})
				},
				immediate: true
			},
		},

		mounted() {
			//this.getBanner()
		},


		methods: {
			async getBanner() {
				var that = this
				that.infoBanner = []
				var data = {
					page: 1,
					size: 20
				}
				let res = await GetListBannerImg(data)

				res.response.data.forEach((item, index) => {
					for (var i = 0; i < that.infoBanner.length; i++) {
						if (item.ImpUrl === that.infoBanner[i]) {
							return true;
						}
					}
					that.infoBanner.push(this.baseUrl + item.ImpUrl)
				})
			},

			//轮播图
			change(e) {
				this.current = e.detail.current
			},

			clickItem(e) {
				this.swiperDotIndex = e
			},

			async queryList(pageNo, pageSize) {
				var zltype = ''
				if (this.tabIndex == 0) {
					zltype = '4'
				} else if (this.tabIndex == 1) {
					zltype = '3'
				}

				var data = {
					Title: this.searchParam,
					zltype: zltype,
					page: pageNo,
					size: pageSize
				}
				let res = await GetListNews(data)

				res.response.data.forEach((item, index) => {
					if (item.ContentImg) {
						item.ContentImg = JSON.parse(item.ContentImg)
					}
				})

				this.$refs.paging.complete(res.response.data);
				this.firstLoaded = true;

			},

			clickItem(item) {
				uni.navigateTo({
					url: '/pages/Home/Details/Details?item=' + encodeURIComponent(JSON.stringify(item))
				})

				setTimeout(() => {
					item.ViewCount++
				}, 500)
			},
		}
	}
</script>

<style scoped>
	.content {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		background-color: #f4f4f4;
	}

	.viewImg {
		width: 100%;
		background-color: #ffffff;
	}

	.paging {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.viewBox {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.itemView {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 24rpx;
	}

	.itemTitle {
		width: 100%;
		height: auto;
		/*高度自动*/
		display: inline-block;
		/*转为行内块元素*/
		white-space: pre-wrap;
		/*处理元素内的空白,保留空白符序列，但是正常地进行换行*/
		word-wrap: break-word;
		/*允许长单词或 URL 地址换行到下一行,在长单词或 URL 地址内部进行换行*/
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}

	.itemImg {
		width: 200rpx;
		height: 155rpx;
		margin-top: 24rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
	}

	.itemText {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		display: flex;
		flex-direction: row;
		margin-top: 24rpx;
		align-items: center;
	}
</style>
